<template>
  <div id="my_table" style="height: 100%; width: 100%">
    <div
      class="icon_tip"
      v-loading="loading"
      element-loading-text="奋力加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 1)"
      v-if="(fields === null || fields.length === 0) && loading == false"
      v-show="isShow"
    >
      <div class="center">
        <img src="../../assets/images/Frame 73.svg" alt class="image" />
        <p class="c-333">数据为空</p>
        <p>暂时还没有内容呢...</p>
      </div>
    </div>
    <el-table
      v-else
      @selection-change="handleSelectEvent"
      :header-cell-style="cellStyle"
      :data="data"
      :header-drag-style="true"
      @cell-click="cellClick"
      size="small"
      :border="border"
      :row-class-name="tableRowClassName"
      :cell-style="unitCellStyle"
      :current-row-key="rowKey"
      :show-summary="summary"
      :row-key="getRowKeys"
      :summary-method="summaryMethod"
      :height="height"
      v-loading="loading"
      element-loading-text="奋力加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 1)"
      element-loading-color="#475ffd"
      ref="checkTable"
      @row-click="rowClick"
      @row-dblclick="rowDblclick"
      :flag="flag"
      :isClick="isClick"
      :isCheck="isCheck"
      :isTable="isTable"
      :highlight-current-row="false"
      @select="clickSelect"
    >
      <template>
        <template slot="empty" v-if="loading == false">
          <div class="center">
            <img src="../../assets/images/Frame 73.svg" alt class="image" />
            <p class="c-333">数据为空</p>
            <p>暂时还没有内容呢...</p>
          </div>
        </template>
        <el-table-column
          v-if="isSelection && isCheck"
          :reserve-selection="true"
          :selectable="selectable"
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
          v-if="isSort"
        ></el-table-column>

        <template v-for="(field, index) in fields">
          <el-table-column
            :key="index"
            resizable
            :prop="field.prop"
            :label="field.label"
            :render-header="questionIcon"
            :align="field.align ? field.align : 'center'"
            :show-overflow-tooltip="true"
          >
            <template v-if="field.children && field.children.length">
              <el-table-column
                v-for="(column, index1) in field.children"
                :key="index1"
                :prop="column.prop"
                :align="field.align ? field.align : 'center'"
                :width="field.colwidth"
                :label="column.label"
              >
              </el-table-column>
            </template>
          </el-table-column>
        </template>

        <el-table-column
          label="操作"
          fixed="right"
          :align="'center'"
          width="55"
          v-if="handle == true"
        >
          <template v-slot="{ row, column, rowIndex }">
            <slot
              name="operation"
              :row="row"
              :column="column"
              :$index="rowIndex"
            ></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="pagination" v-if="isPaginationShow">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="paginationInfo.current"
        :page-size="paginationInfo.size"
        background
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  computed: {},
  name: "HouseKeeperTable",
  props: { 
    isShow: {
      type: Boolean,
      default: true,
    },
    //是否把复选框禁用
    selectableBoo: {
      type: Boolean,
      default: false,
    },
    isSort: {
      // 是否显示排序
      type: Boolean,
      default: true,
    },
    isClick: {
      // 可否单击
      type: Boolean,
      default: true,
    },
    isCheck: {
      // 可否多选
      type: Boolean,
      default: true,
    },
    isTable: {
      // 是否至此禁用
      type: Boolean,
      default: false,
    },
    //单行颜色表格唯一标识，默认为id
    rowKey: {
      type: String,
      default: "id",
    },
    border: {
      type: Boolean,
      default: true,
    },
    //是否自定义单元样式
    isCell: {
      type: Boolean,
      default: false,
    },
    //是否支持选中
    isSelection: {
      type: Boolean,
      default: true,
    },
    //是否开启操作栏
    handle: {
      type: Boolean,
      default: false,
    },
    //表格数据
    data: {
      type: Array,
      default: () => [],
    },
    //表头
    fields: {
      type: Array,
      default: () => [],
    },

    tableHeadBackground: {
      type: String,
      default: "#D8D8D8",
    },
    tableHeadColor: {
      type: String,
      default: "#000",
    },
    height: {
      type: [Number, String],
    },
    cellStyle: {
      type: Object,
      // default: {}
      default: () => ({ backgroundColor: "#ffff" }),
    },
    //是否开启loading效果
    loading: {
      type: Boolean,
      default: true,
    },
    // 表格标识名称
    sessionName: {
      type: String,
    },
    flag: {
      type: Boolean,
      default: false,
    },
    //是否开启合计
    summary: {
      type: Boolean,
      default: false,
    },
    totalMoney: {
      type: Object,
      default: () => {
        return {};
      },
    },
    totalMoney1: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 分页器内容 ↓
    total: {
      // 需要将每个页面的total传递到此组件
      type: Number,
      default: 0,
    },
    isPaginationShow: {
      // 每一个调用table的组件需要传递一个参数，是否显示分页器
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      lastField: "",
      scrollEl: null,
      currentSelectedTime: null,
      multiSelected: [],
      multiSelectedId: [],
      time: null,
      selectArr: [],
      paginationInfo: {
        current: 1,
        size: 13,
      },
    };
  },
  created() {},
  methods: {
    //页数
    currentChange() {},
    //条数
    sizeChange() {},
    clickSelect(selection, row) {
      // console.log(row,1234);
      // this.$refs.checkTable.toggleRowSelection([
      //       { row: row, selected: true },
      //     ]);
    },
    questionIcon(h, { column, $index }) {
      return h("span", [
        h("span", {
          class: "questionIcon",
          on: {
            click: () => {
              // console.log(`${column.label}   ${$index}`);
            },
          },
        }),
        h("span", column.label),
      ]);
    },
    getRowKeys(row) {
      return row.id;
    },
    //合计
    summaryMethod({ columns, data }) {
      const means = [];
      let arr = [];
      means.push("合计");
      if (this.isSelection) {
        means.push("");
      }
      this.fields.forEach((column, columnIndex) => {
        if (column.prop == "myindex") {
          return;
        }
        if (column.prop == "id") {
          return;
        }
        let boo = false;
        if (this.totalMoney1) {
          for (const key in this.totalMoney1) {
            if (this.totalMoney1[key]) {
              if (column.prop == key) {
                means.push(this.totalMoney1[key].rentStatistical);
                means.push(this.totalMoney1[key].discountStatistical);
                means.push(this.totalMoney1[key].payStatistical);
                boo = true;
                return;
              }
            }
          }
        }
        if (this.totalMoney) {
          for (const key in this.totalMoney) {
            if (column.prop == key) {
              means.push(this.totalMoney[key] + "元");
              boo = true;
              return;
            }
          }
        }
        if (!boo) {
          means.push("");
        }
      });
      return means;
    },
    // 重置表格
    reset(delList) {
      if (delList && delList.length > 0) {
        delList.map((item) => {
          sessionStorage.removeItem(item);
        });
      }
      this.$refs.checkTable.clearSelection();
    },

    deleteArr(arr) {
      let sessionArr = JSON.parse(
        sessionStorage.getItem(this.currentSessionName)
      );
      if (arr.length > 0) {
        let obj = arr[0];
        sessionArr = sessionArr.filter(
          (item) => item[this.rowKey] !== obj[this.rowKey]
        );
        sessionStorage.setItem(
          this.currentSessionName,
          JSON.stringify(sessionArr)
        );
        arr.splice(0, 1);
        this.deleteArr(arr);
      } else {
        if (sessionArr.length > 0) {
          sessionArr.map((item) => {
            let row = item;
            this.$refs.checkTable.toggleRowSelection([
              { row: row, selected: true },
            ]);
          });
        } else {
          this.$refs.checkTable.clearSelection();
        }
      }
    },
    // 删除选中列
    delFn(arr) {
      this.deleteArr(arr);
    },
    //自定义单元样式
    unitCellStyle({ row, rowIndex, column }) {
      if (!this.isCell) return;
    },
    //选中时每行的颜色
    tableRowClassName({ row, rowIndex }) {
      for (let item in this.multiSelected) {
        if (this.multiSelected[item][this.rowKey] == row[this.rowKey]) {
          return "current-row";
        }
      }
      if (rowIndex % 2 == 1) {
        // 奇数行
        return "row-odd";
      } else {
        return "row-even";
        // 偶数行
      }
    },
    //当每行点击
    cellClick(row, column, event) {
      this.$emit("cellClick", row, column);
    },
    //当每行双击
    rowDblclick(row, column) {
      this.$emit("rowDblclick", row, column);
    },

    handleSelectEvent(selection) {
      this.$emit("selectionFn", selection);
      this.multiSelected = selection;
      this.multiSelectedId = this.multiSelected.map((item) => {
        return item[this.rowKey];
      });
    },
    //决定这行的复选框是否可以勾选
    selectable(row, index) {
      let that = this;
      if (that.selectableBoo) {
        return false;
      } else {
        if (!that.flag) {
          return true;
        }
        // if (row.payStatus === "已支付" || row.payStatus == 1) {
        //   return true;
        // } else {
        //   return false;
        // }
      }
    },
    //点击当前行
    rowClick(row, column, cell, event) {
      let _this = this;
      _this.$refs.checkTable.toggleRowSelection(row);
      _this.$emit("rowClick", row);
    },
  },

  mounted() {
    // 回显数据  DOMSubtreeModified
  },
  watch: {
    selectableBoo() {
      let that = this;
      that.$nextTick(() => {
        setTimeout(() => {
          if (that.selectableBoo) {
            that.data.forEach((row) => {
              if (row.invoiceNo) {
                that.$refs.checkTable.toggleRowSelection(row, true);
              }
            });
          }
        }, 500);
      });
    },
    data() {
      let that = this;
      if (
        document.querySelector(".el-table--body-wrapper") &&
        document.querySelector(".el-table--body-wrapper").scrollTop
      ) {
        setTimeout(() => {
          document.querySelector(".el-table--body-wrapper").scrollTop =
            document.querySelector(".el-table--body-wrapper").scrollTop + 1;
        });
      }

      that.$nextTick(() => {
        setTimeout(() => {
          if (that.selectableBoo) {
            that.data.forEach((row) => {
              if (row.invoiceNo) {
                that.$refs.checkTable.toggleRowSelection(row, true);
              }
            });
          }
        }, 500);
      });
      this.$nextTick(() => {
        this.$refs.checkTable.doLayout();
        document.querySelector(".el-table--body-wrapper").scrollBar = 50;
      });
    },
    // currentSessionName(news, old) {
    //   let data =
    //     JSON.parse(sessionStorage.getItem(this.currentSessionName)) || [];
    //   if (data.length > 0) {
    //     this.multiSelected = data;
    //   } else {
    //     sessionStorage.setItem(this.currentSessionName, "[]");
    //     this.multiSelected = [];
    //   }
    //   if (!this.isSelection && !this.isCheck) return;
    // },
  },
};
</script>

<style lang="scss">
.el-table--border th.gutter:last-of-type {
  border-bottom: 1px solid #ebeef5;
  border-bottom-width: 1px;
  width: 20px !important;
  display: block !important;
}
.current-row {
  height: 12px !important;
  color: rgba(0, 0, 0, 0.65);
  font-size: 12px;

  padding: 0;
  > td {
    background-color: #b2bdff !important;
  }
}

.el-table {
  height: 100%;
}
.el-table-column--selection .cell {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.el-table__row {
  height: 12px !important;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  padding: 0;
}

.el-table .cell {
  white-space: pre !important;
}

.el-table.el-editable.size--small .el-body--column,
.el-table.size--small .el-body--column.col--ellipsis,
.el-table.size--small .el-footer--column.col--ellipsis,
.el-table.size--small .el-header--column.col--ellipsis {
  height: 32px !important;
  color: rgba(0, 0, 0, 0.65);
  font-size: 12px;
}

.plTableBox
  .singleTable
  .el-table
  .el-table--main-wrapper
  .el-table--body-wrapper {
  border-radius: 0 0 10px 10px !important;
}
.el-table--footer-wrapper.body--wrapper {
  width: 100% !important;
  margin-top: 0px !important;
  padding: 0 !important;
  left: 0 !important;
  right: 0 !important;
  tfoot {
    .el-footer--row {
      .el-footer--column {
        color: red;
      }
    }
  }
}
#my_table {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1) !important;
}

// .plTableBox {
//   height: 100%;
//   .singleTable {
//     height: 100%;
.el-table {
  height: 100% !important;
  .el-table--main-wrapper {
    height: 100%;

    .el-table--header-wrapper {
      .el-table--header {
        .el-header--row {
          .el-header--column {
            border-right: 1px solid #e6e6e6;
            .el-cell {
              font-size: 12px;
              .el-cell--checkbox {
                // top: 8px;
                left: 1px;
              }
            }
          }
        }
      }
    }
    .el-table--body-wrapper {
      height: calc(100% - 32px);
      // overflow: auto;

      .current-row {
        color: rgba(0, 0, 0, 0.85);
        background-color: #b2bdff !important;
      }
    }
  }
}
//   }
// }

//
.input {
  outline: none;
  background: transparent;
  border: none;
  outline: medium;
  width: 50px;
  color: #666666;
}

/deep/img {
  width: 221px;
  height: 150px;
}
.icon_tip {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .center {
    text-align: center;
    p {
      font-size: 20px;
      &:last-child {
        font-size: 18px;
        margin-top: 22px;
        color: #999;
      }
    }
  }
}

.image {
  width: 221px;
  height: 150px;
}
.b {
  color: #475ffd;
  padding: 5px;
  cursor: pointer;
}
.presentation {
  background: #ffeacb;
  height: 30px;
  width: 125%;
  margin-left: -10px;
  display: flex;
  justify-content: center;
}
.el-table__footer {
  .has-gutter {
    .cell {
      color: red !important;
    }
  }
}
.row-odd {
  background: #fff !important;
}
.row-even {
  background: rgb(229, 237, 246) !important;
}
.el-table th > .cell {
  font-weight: 700 !important;
  color: rgb(93, 93, 93);
  font-size: 18px;
}
.pagination {
  width: 100%;
  height: 11%;
  background: #fff;
  margin-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
